<template>
	<view class="order-detail" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
		<tn-nav-bar  :alpha="true">申请售后</tn-nav-bar>
		
		<view class="order_content">
			<view class="order-detail__header-bg">
				<view class="content">
					<view class="tit font-lg-8 font-weight-500">{{handleStatusFilter(detail.order_status) }} </view>
					<view class="type">{{orderTypeFilter(detail.type) }} </view>
				</view>
			</view>
		
			
			<view class="order-detail__content">
				<view class="info_lt">
					<image style="width: 20%;height: auto; " mode="aspectFit" :src="getSrc(detail)"></image>
					<view class="rt">
						<view class="info">
							<view class="title">{{getTitle(detail)}}</view>
							<view class="topic" style="color: #666;font-size: 12px;" v-if="detail.mentor.topic.name">{{detail.mentor.topic.name}}</view>
						</view>
						<view class="ft">
							<view class="price">￥{{getPrice(detail)}}</view>
							<view class="number"> 人数:{{detail.order_number}}</view>
							<view class="times" v-if="detail.type == 1"> 时间段:{{getTimesCount(detail.times)}}</view>
						</view>
					</view>
				</view>
				<view class="footer">
					
					<view class="amout" v-if="detail.type == 1">
						<view>预约日期</view>
						<view>{{detail.order_date}}</view>
					</view>
					
					<view class="amout" v-if="detail.type == 1">
						<view>预约时间段</view>
						<view> 
							<tn-tag v-for="item in timesFormate(detail.times)"  size="sm" margin="3px" backgroundColor="#ff6708" fontColor="#FFFFFF" shape="circle" >
								{{item}}
							</tn-tag>
						</view>
					</view>
					
					<view class="amout" v-if="detail.type == 0">
						<view>预约时间</view>
						<view>{{detail.order_date}} {{detail.times}}</view>
					</view>
					
					<view class="amout">
						<view>订单总价</view>
						<view>￥{{detail.total_amount}}</view>
					</view>
					
					<view class="amout">
						<view>优惠抵扣</view>
						<view>￥{{detail.coupon_money}}</view>
					</view>
					

					<view class="amout big">
						<view>实付款</view>
						<view>￥{{detail.pay_money}}</view>
					</view>
				</view>
			</view>
			
			<view class="order-detail__other">
				<tn-form :model="form" ref="form" :errorType="['message']">
					
					<tn-form-item label="退款金额" prop="reason" labelWidth="200">
					    <tn-input v-model="form.money"/>
					</tn-form-item>
					
					<tn-form-item label="退款理由" prop="reason" labelWidth="200">
					    <tn-input v-model="form.reason"/>
					</tn-form-item>
					
					<view class="submit-btn"  @click="submit">提交</view>
				</tn-form>
			</view>
		</view>
		
		
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {orderDetail} from '@/api/user/index.js'
	import {cancelOrder,confirmOrderStatus, preReturn,subReturn} from '@/api/order/order.js'
	import  {parseTime, param2Array}  from '@/util/index.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				form: {
				  order_sn: '',
				  money:0,
				  maxMoney:0,
				  reason:"",
				  refund_ratio:0
				},
				order_sn:"",
				rate:0,
				loading:false,
				detail:{},
				status: [
				  {
					name: '订单待付款',
					order_status:0,
				  },
				  {
					name: '订单待服务',
					order_status:1
				  },
				  {
					name: '订单待评价',
					order_status:2
				  },
				  {
					name: '订单已完成',
					order_status:4
				  },
				  {
				  	name: '订单已取消',
				  	order_status:-1
				  }
				],
			}
		},
		onLoad(e) {
			this.order_sn = e.order_sn
			this.loading = true
			this.initData()
		},
		methods: {
			timesFormate(str){
			  return param2Array(str)
			},
			submit(){
				if(!this.form.reason || this.form.reason.length < 1){
					uni.showToast({
						icon:'none',
						title:'退款理由不能为空!'
					})
					
					return false;
				}
				
				if(!this.form.money || this.form.reason.money <= 0 ){
					uni.showToast({
						icon:'none',
						title:'退款金额不能为空!'
					})
					
					return false;
				}
				
				if(this.form.money>this.form.maxMoney){
					uni.showToast({
						icon:'none',
						title:'退款金额不能大于'+(this.form.maxMoney.toFixed(2))+'!'
					})
					
					return false;
				}
				
				this.form.order_sn = this.order_sn
				this.loading = true
				subReturn(this.form).then(res=>{
					this.loading = false
					
					uni.showToast({
						icon:'none',
						title:'退款申请成功，请等待管理员审批！',
						duration:2000
					})
					
					uni.redirectTo({
						url:"/pages/user/order/list"
					})
				},err=>{
					this.loading = false
				})
				
			},
			initData(){
				orderDetail({order_sn:this.order_sn}).then(res=>{
					this.detail = res
					
					preReturn({order_sn:this.order_sn}).then(res=>{
						this.rate = res
						this.form.maxMoney = this.form.money = (this.detail.pay_money * res / 100).toFixed(2)
					})
					
					this.loading = false
				}, err=>{
					this.loading = false
				})
				
				
			},
			handleStatusFilter(order_status){
				return this.status.find(re=>re.order_status==order_status)?.name
			},
			orderTypeFilter(type){
				  if(type == 0) return "导师预约单";
				  if(type == 1) return "场地预约单";
				  if(type == 2) return "社群预约单";
			 },
			 getSrc(item){
				  if(item.type == 0) return item.mentor.user.avatar
				  if(item.type == 1) return item.space.pic
				  if(item.type == 2) return item.activity.pic
			 },
			 getTitle(item){
				  if(item.type == 0) return item.mentor.nickname
				  if(item.type == 1) return item.space.title
				  if(item.type == 2) return item.activity.title
			 },
			 getPrice(item){
				  if(item.type == 0) return item.mentor.price
				  if(item.type == 1) return item.space.price
				  if(item.type == 2) return item.activity.price
			},
			getTimesCount(str){
				 return str.split(",").length
			},
			cancelOrders(order_sn){
				 this.loading = true
				 cancelOrder({order_sn:order_sn}).then(res=>{
					 this.initData()
				 },err=>{
					 this.loading = false
					 
					 uni.showModal({
						content: '订单取消失败',
						success: function (res) {
							if (res.confirm) {
								//this.initData
							} else if (res.cancel) {
								//this.initData
							}
						}
					 });
				 })
			},
			confirmOrder(order_sn){
				 this.loading = true
				 confirmOrderStatus({order_sn:order_sn}).then(res=>{
					this.initData()
				 },err=>{
					 this.loading = false
					 
					 uni.showModal({
						content: '操作失败',
						success: function (res) {
							if (res.confirm) {
								//this.initData
							} else if (res.cancel) {
								//this.initData
							}
						}
					 });
				 })
			},
			 turnPay(order_sn){
				uni.navigateTo({
				  url: '/pages/order/pay/pay?order_sn='+order_sn
				})
			 },
			 comment(order_sn){
				uni.navigateTo({
				  url: '/pages/user/order/comment?order_sn='+order_sn
				}) 
			 }
		}
	}
</script>

<style lang="scss" scoped>
.order-detail {
  width: 100vw;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 110rpx);
  background: $tn-main-bg;
  min-height: 100vh;
  font-size: 12px;
  
  .order_content{padding: 0 7%;}

  &__header-bg {
    width: 100%;

    .content {
      background: #fff;
      border-radius: 5px;
      padding: 15px;
      line-height: 32px;
	  margin-top: 16px;

      .tit {
        margin-bottom: 4rpx;
		font-size: 14px;
		font-weight: bold;
      }
	  
	  .type {color: #666;}
	  
	  .action-box{
		  margin-top: 12px;
		  text-align: left;
		  .action-btn{
			  background: $tn-main-orange;
			  color: #fff;
			  line-height: 26px;
			  height: 26px;
			  padding: 0 16rpx;
			  font-size: 12px;
			  width: 23%;
			  margin-right: 8px;
			  display: inline-block;
		  }
		  
		  .cacel-btn{
			  background: #fff;
			  color: #000;
			  border: 1px solid #333;
		  }
	  }
    }
  }
  
  &__user{
	  margin-top: 16px;
	  background: #fff;
	  border-radius: 5px;
	  padding: 15px;
	  line-height: 32px;
  }
  
  &__content{
	  margin-top: 16px;
  	  background: #fff;
  	  border-radius: 5px;
  	  padding: 15px;
  	  line-height: 32px;
	  
	  .info_lt{
		  display: flex;
		  color: #333;
		  
		  .rt{
			 width: 80%;
			 display: flex; 
			 justify-content: space-between;
			 padding-left: 12px;
		  }
		  
		  .info {font-size: 14px;}
		  .ft{
			color: #8e8e8e;
			text-align: right;
			.price{
				color: #8e8e8e;
			}
		  }
	  }
	  
	  .footer{
		  padding-top: 12px;
		  margin-top: 12px;
		  border-top: 1px solid #e8e2e2;
		  .amout{
			 display: flex;
			 justify-content: space-between;
		  }
		  
		  .big{
			  font-size: 14px;
			  font-weight: bold;
		  }
	  }
  }
  
  &__other{
	  color: #8e8e8e;
	  margin-top: 16px;
	  background: #fff;
	  border-radius: 5px;
	  padding: 15px;
	  line-height: 32px;
	.line{
		display: flex;
		justify-content: space-between;
	}  
  }
}
/* 授权按钮 */
	  .submit-btn {
	    background: $tn-main-orange;
		width: 90%;
	    color: #FFFFFF;
	    border-radius: 20rpx;
	    font-size: 28rpx;
	    margin: 40rpx auto;
		line-height: 36px;
		text-align: center;
	  }
</style>
